<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss'; // @include flexbox()
  .user-container {
    background: #fff;
    padding-top: 1.25rem;
    @include wh(10rem, 100%);
    .clear {
      width: 16px;
      height: 16px;
      margin: 0;
      position: absolute;
      right: 10px;
      @include bg('~assets/common/images/close.png');
    }
    .logo {
      @include flexbox(center,
      center,
      column,
      nowrap);
      padding-top: 1rem;
      img {
        width: 3rem;
        height: auto;
      }
      p {
        padding: $padding;
        color: #aaaaaa;
        font-size: $title;
      }
    }
    /* 注册 */
    .registered-container {
      height: 100%;
      background: #fff;
      .my-header .back {
        background: url('~assets/common/images/arrow-left.png') no-repeat;
        background-size: 100%;
      }
      .cell-box {
        padding: 30px 15px;
        >p {
          padding: 20px 10px;
          font-size: $title;
          color: #333;
          text-align: left;
        }
        .phone-cell {
          position: relative;
          background: #fff;
          padding: $padding;
          border-bottom: 1px solid #eee;
          @include placeholderColor($gray);
          width: 100%;
          input {
            width: 100%;
            border: none;
            outline: none;
            box-shadow: none;
            text-shadow: none;
            text-align: left;
            font-size: $title;
            color: #333;
          }
        }
        .registered-code-cell {
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          padding: 0 16px;
          .code-cell {
            width: 50%;
            background: #fff;
            position: relative;
            padding: $padding;
            @include placeholderColor($gray);
            input {
              width: 100%;
              border: none;
              outline: none;
              box-shadow: none;
              text-shadow: none;
              text-align: left;
              font-size: $title;
              color: #333;
            }
          }
          .registered-getCode {
            width: 50%;
            background: $red;
            color: #fff;
            font-size: 16px;
            text-align: center;
            margin-left: 10px;
            border-radius: 2px;
            padding: 10px 0;
          }
        }
        .other-link {
          @include flexbox(center,
          center,
          row,
          wrap);
          font-size: 15px;
          color: $gray;
          margin-top: 2rem;
          span {
            margin-left: $margin;
            color: $red;
            cursor: pointer;
          }
        }
        .agrement {
          width: 90%;
          margin: 0 auto;
          font-size: 12px;
          color: $gray;
          padding-bottom: $padding;
          span {
            color: $red;
            cursor: pointer;
          }
        }
      }
    }
  }

  .from-user {
    padding: $padding;
    background: #fff;
    .cell-list {
      .cell-item {
        @include flexbox(flex-start,
        center,
        row,
        nowrap);
        border-bottom: 1px solid #eee;
        padding: $padding $padding $padding 0;
        margin: $margin 0;
        position: relative;
        .left {
          span {
            font-size: $title;
            color: #333;
          }
        }
        .right {
          width: 70%;
          margin-left: 20px;
          @include placeholderColor($gray);
          input {
            width: 100%;
            border: none;
            outline: none;
            box-shadow: none;
            text-shadow: none;
            text-align: left;
            font-size: $title;
            color: #333;
          }
          .arrow-right {
            display: block;
            width: 16px;
            height: 20px;
            background: url('~assets/common/images/arrow-right.png') no-repeat;
            background-size: 100%;
          }
        }
      }
    }
    .err-text {
      color: $red;
    }
    .other-link {
      @include flexbox(center,
      center,
      row,
      nowrap);
      font-size: 15px;
      color: $gray;
      margin-top: 2rem;
      span {
        margin-left: $margin;
        color: $red;
        cursor: pointer;
      }
    }
  }
</style>
<template>
  <div class="user-container">
    <div class="my-header">
      <i class="back iconfont icon-left" @click="$router.go(-1)"></i>
      <strong>登录</strong>
      <i class="myMsg"></i>
    </div>
    <div class="logo">
      <img src="~assets/common/images/login_icon.png" alt="">
      <p>专业运动用品交易服务平台</p>
    </div>
    <div class="from-user">
      <div class="cell-list">
        <div class="cell-item">
          <div class="right">
            <input v-focus v-validate.initial="'required'" type="text" name="username" v-model="loginForm.username" placeholder="请输入用户名或手机号码">
          </div>
          <i class="clear" style="" v-show="loginForm.username.length>0" @click="loginForm.username=''"></i>
        </div>
        <div class="cell-item">
          <div class="right">
            <input v-model="loginForm.password" v-validate.initial="'required'" type="password" name="password" @keyup.enter="doLogin"
              placeholder="请输入密码">
          </div>
          <i class="clear" style="" v-show="loginForm.password.length>0" @click="loginForm.password=''"> </i>
        </div>
      </div>
      <div :class="['cell-btn',errors.has('username')||errors.has('password')?'disabled-btn':'']" @click="()=>{errors.has('username')||errors.has('password')?false:doLogin()}">登录</div>
      <div class="other-link">
        还没有账户? <span @click="()=>visiblePopup.registered=true">注册</span>
      </div>
    </div>
    <!-- 注册 -->
    <mt-popup v-model="visiblePopup.registered" :closeOnClickModal="true" :modal="false" position="right" class="modal-popup">
      <div class="registered-container">
        <div class="my-header">
          <i class="back" @click="()=>visiblePopup.registered=false"></i>
          <strong></strong>
          <i class="myMsg"></i>
        </div>
        <div class="cell-box">
          <p>
            移动注册
          </p>
          <div class="phone-cell">
            <input v-focus v-validate.initial="'required|mobile'" name="registered-phone" type="tel" v-model="registeredForm.phone" placeholder="请输入手机号">
            <i class="clear" style="" v-show="registeredForm.phone.length>0" @click="registeredForm.phone=''" style="right: 10px;top:12px;"></i>
          </div>
          <div :class="['cell-btn',errors.has('registered-phone')?'disabled-btn':'']" @click="registeredNext">下一步</div>
          <div class="other-link">
            已经有账号了？ <span @click="()=>visiblePopup.registered=false">登录</span>
          </div>
        </div>
      </div>
      <mt-popup v-model="visiblePopup.registeredCode" :closeOnClickModal="true" :modal="false" position="right" class="modal-popup">
        <div class="registered-container">
          <div class="my-header">
            <i class="back" @click="()=>visiblePopup.registeredCode=false"></i>
            <strong></strong>
            <i class="myMsg"></i>
          </div>
          <div class="cell-box">
            <p>请输入{{registeredForm.phone}} 收到的验证码</p>
            <div class="registered-code-cell">
              <div class="code-cell">
                <input v-focus v-validate.initial="'required'" name="registeredCode" type="tel" v-model="registeredForm.code" placeholder="请输入验证码">
                <i class="clear" v-show="registeredForm.code.length>0" @click="registeredForm.code=''" style="right: 10px;top:12px;"></i>
              </div>
              <div :class="['registered-getCode',registeredForm.resetSendPhoneMessage?'disabled-btn':'']" @click="registeredSendPhoneMessage"
                :disabled="registeredForm.resetSendPhoneMessage">{{registeredForm.resetSendPhoneMessage ? `${registeredForm.resetSendPhoneMessage}后重新发送` : '获取验证码'}}</div>
            </div>
            <div :class="['cell-btn',errors.has('registeredCode')?'disabled-btn':'']" @click="sendPhoneMessagedNext">下一步</div>
            <div class="other-link">
              已经有账号了？ <span @click="()=>visiblePopup.registered=false">登录</span>
            </div>
          </div>
        </div>
      </mt-popup>
      <mt-popup v-model="visiblePopup.registeredFormId" :closeOnClickModal="true" :modal="false" position="right" class="modal-popup">
        <div class="registered-container">
          <div class="my-header">
            <i class="back" @click="()=>visiblePopup.registeredFormId=false"></i>
            <strong></strong>
            <i class="myMsg"></i>
          </div>
          <div class="cell-box">
            <p>设置密码</p>
            <div class="from-user">
              <div class="cell-list">
                <div class="cell-item">
                  <div class="right">
                    <input v-validate.initial="'required|password|confirmed:registeredConfirmPassword'" name="registeredPassword" type="password"
                      v-model="registeredForm.password" placeholder="请输入密码">
                  </div>
                  <i class="clear" style="" v-show="registeredForm.password.length>0" @click="registeredForm.password=''"></i>
                </div>
                <div class="cell-item">
                  <div class="right">
                    <input v-validate.initial="'required'" name="registeredConfirmPassword" type="password" v-model="registeredForm.confirmpassword"
                      placeholder="请重新输入确认密码">
                  </div>
                  <i class="clear" style="" v-show="registeredForm.confirmpassword.length>0" @click="registeredForm.confirmpassword=''"></i>
                </div>
              </div>
              <span v-show="errors.has('registeredPassword')" class="err-text">{{ errors.first('registeredPassword') }}</span>
            </div>
            <div :class="['cell-btn',errors.has('registeredMemberName') || errors.has('registeredPassword') || errors.has('registeredConfirmPassword') ?'disabled-btn':'']"
              @click="registered">确认</div>
            <div class="agrement" style="font-size:12px;">
              点击[确认]代表您已阅读同意 <span @click="()=>visiblePopup.registeredAgrement=true">《激想云商用户服务协议》</span>
            </div>
            <div class="other-link">
              已经有账号了？ <span @click="()=>visiblePopup.registered=false">登录</span>
            </div>
          </div>
        </div>
      </mt-popup>
      <mt-popup v-model="visiblePopup.registeredAgrement" :closeOnClickModal="true" :modal="false" position="right" class="modal-popup">
        <div class="registered-container">
          <div class="my-header">
            <i class="back" @click="()=>visiblePopup.registeredAgrement=false"></i>
            <strong>激想云商服务条款</strong>
            <i class="myMsg"></i>
          </div>
          <div class="cell-box">
            <div class="content">
              <h3>一、总则</h3>
              <p>1.1　用户应当同意本协议的条款并按照页面上的提示完成全部的注册程序。用户在进行注册程序过程中点击"同意"按钮即表示用户与激想云商达成协议，完全接受本协议项下的全部条款。</p>
              <p>1.2　用户注册成功后，激想云商将给予每个用户一个用户帐号及相应的密码，该用户帐号和密码由用户负责保管；用户应当对以其用户帐号进行的所有活动和事件负法律责任。</p>
              <p>1.3　用户可以使用激想云商各个频道单项服务，当用户使用激想云商各单项服务时，用户的使用行为视为其对该单项服务的服务条款以及激想云商在该单项服务中发出的各类公告的同意。</p>
              <p>1.4　激想云商会员服务协议以及各个频道单项服务条款和公告可由激想云商随时更新，且无需另行通知。您在使用相关服务时,应关注并遵守其所适用的相关条款。您在使用激想云商提供的各项服务之前，应仔细阅读本服务协议。如您不同意本服务协议及/或随时对其的修改，您可以主动取消激想云商提供的服务；您一旦使用激想云商的服务，即视为您已了解并完全同意本服务协议各项内容，包括激想云商对服务协议随时所做的任何修改，并成为激想云商用户。</p>
              <h3>二、注册信息和隐私保护</h3>
              <p>2.1　激想云商帐号（即激想云商用户ID）的所有权归激想云商，用户完成注册申请手续后，获得激想云商帐号的使用权。用户应提供及时、详尽及准确的个人资料，并不断更新注册资料，符合及时、详尽准确的要求。所有原始键入的资料将引用为注册资料。如果因注册信息不真实而引起的问题，并对问题发生所带来的后果，激想云商不负任何责任。</p>
              <p>2.2　用户不应将其帐号、密码转让或出借予他人使用。如用户发现其帐号遭他人非法使用，应立即通知激想云商。因黑客行为或用户的保管疏忽导致帐号、密码遭他人非法使用，激想云商不承担任何责任。</p>
              <p>2.3　激想云商不对外公开或向第三方提供单个用户的注册资料，除非：</p>
              <p>(1)事先获得用户的明确授权：只有透露您的个人资料，才能提供您所要求的产品和服务；</p>
              <p>（2）根据有关的法律法规要求；</p>
              <p>（3）按照相关政府主管部门的要求；</p>
              <p>（4）为维护激想云商的合法权益。</p>
              <p>2.4　在您注册激想云商账户，使用其他激想云商产品或服务，访问激想云商网页, 或参加促销和有奖游戏时，激想云商会收集您的个人身份识别资料，并会将这些资料用于：改进为你提供的服务及网页内容。</p>
              <h3>三、使用规则</h3>
              <p>3.1　用户在使用激想云商服务时，必须遵守中华人民共和国相关法律法规的规定，用户应同意将不会利用本服务进行任何违法或不正当的活动，包括但不限于下列行为∶</p>
              <p>上载、展示、张贴、传播或以其它方式传送含有下列内容之一的信息：</p>
              <p>不得为任何非法目的而使用网络服务系统</p>
              <p>不利用激想云商服务从事以下活动：</p>
              <p>未经允许，进入计算机信息网络或者使用计算机信息网络资源的；</p>
              <p>未经允许，对计算机信息网络功能进行删除、修改或者增加的；</p>
              <p>未经允许，对进入计算机信息网络中存储、处理或者传输的数据和应用程序进行删除、修改或者增加的；故意制作、传播计算机病毒等破坏性程序的；其他危害计算机信息网络安全的行为。</p>
              <p>3.2　用户违反本协议或相关的服务条款的规定，导致或产生的任何第三方主张的任何索赔、要求或损失，包括合理的律师费，您同意赔偿激想云商与合作公司、关联公司，并使之免受损害。对此，激想云商有权视用户的行为性质，采取包括但不限于删除用户发布信息内容、暂停使用许可、终止服务、限制使用、回收激想云商帐号、追究法律责任等措施。对恶意注册激想云商帐号或利用激想云商帐号进行违法活动、捣乱、骚扰、欺骗、其他用户以及其他违反本协议的行为，激想云商有权回收其帐号。同时，激想云商会视司法部门的要求，协助调查。</p>
              <p>3.3　用户不得对本服务任何部分或本服务之使用或获得，进行复制、拷贝、出售、转售或用于任何其它商业目的。</p>
              <p>3.4　用户须对自己在使用激想云商服务过程中的行为承担法律责任。用户承担法律责任的形式包括但不限于：对受到侵害者进行赔偿，以及在数据堂首先承担了因用户行为导致的行政处罚或侵权损害赔偿责任后，用户应给予激想云商等额的赔偿。</p>
              <h3>四、服务内容</h3>
              <p>4.1　激想云商网络服务的具体内容由激想云商根据实际情况提供。</p>
              <p>4.2　除非本服务协议另有其它明示规定，激想云商所推出的新产品、新功能、新服务，均受到本服务协议之规范。</p>
              <p>4.3　为使用本服务，您必须能够自行经有法律资格对您提供互联网接入服务的第三方，进入国际互联网，并应自行支付相关服务费用。此外，您必须自行配备及负责与国际联网连线所需之一切必要装备，包括计算机、数据机或其它存取装置。</p>
              <p>4.4　鉴于网络服务的特殊性，用户同意激想云商有权不经事先通知，随时变更、中断或终止部分或全部的网络服务（包括收费网络服务）。激想云商不担保网络服务不会中断，对网络服务的及时性、安全性、准确性也都不作担保。</p>
              <p>4.5　激想云商需要定期或不定期地对提供网络服务的平台或相关的设备进行检修或者维护，如因此类情况而造成网络服务（包括收费网络服务）在合理时间内的中断，激想云商无需为此承担任何责任。激想云商保留不经事先通知为维修保养、升级或其它目的暂停本服务任何部分的权利。</p>
              <p>4.6　用户明确同意其使用激想云商网络服务所存在的风险将完全由其自己承担。用户理解并接受下载或通过激想云商服务取得的任何信息资料取决于用户自己，并由其承担系统受损、资料丢失以及其它任何风险。激想云商对在服务网上得到的任何商品购物服务、交易进程、招聘信息，都不作担保。</p>
              <p>4.7　6个月未登录的帐号，激想云商保留关闭的权利。</p>
              <p>4.8　激想云商有权于任何时间暂时或永久修改或终止本服务（或其任何部分），而无论其通知与否，激想云商对用户和任何第三人均无需承担任何责任。</p>
              <p>4.9　终止服务</p>
              <p>您同意激想云商得基于其自行之考虑，因任何理由，包含但不限于长时间未使用，或激想云商认为您已经违反本服务协议的文字及精神，终止您的密码、帐号或本服务之使用（或服务之任何部分），并将您在本服务内任何内容加以移除并删除。您同意依本服务协议任何规定提供之本服务，无需进行事先通知即可中断或终止，您承认并同意，激想云商可立即关闭或删除您的帐号及您帐号中所有相关信息及文件，及/或禁止继续使用前述文件或本服务。此外，您同意若本服务之使用被中断或终止或您的帐号及相关信息和文件被关闭或删除，激想云商对您或任何第三人均不承担任何责任。</p>
              <h3>五、责任声明</h3>
              <p>5.1 用户明确同意其使用本站网络服务所存在的风险及一切后果将完全由用户本人承担，激想云商对此不承担任何责任。 </p>
              <p>5.2 本站无法保证网络服务一定能满足用户的要求，也不保证网络服务的及时性、安全性、准确性。 </p>
              <p>5.3 本站不保证为方便用户而设置的外部链接的准确性和完整性，同时，对于该等外部链接指向的不由本站实际控制的任何网页上的内容，本站不承担任何责任。</p>
              <p>5.4 对于因不可抗力或本站不能控制的原因造成的网络服务中断或其它缺陷，本站不承担任何责任，但将尽力减少因此而给用户造成的损失和影响。</p>
              <p>5.5 对于站向用户提供的下列产品或者服务的质量缺陷本身及其引发的任何损失，本站无需承担任何责任：</p>
              <p>(1)本站向用户免费提供的各项网络服务； </p>
              <p>(2)本站向用户赠送的任何产品或者服务。</p>
              <p>5.6 本站有权于任何时间暂时或永久修改或终止本服务(或其任何部分)，而无论其通知与否，本站对用户和任何第三人均无需承担任何责任。</p>
              <h3>六、版权声明</h3>
              <p>6.1 本站的文字、图片、音频、视频等版权均归上海激想体育文化有限公司享有或与作者共同享有，未经本站许可，不得任意转载。</p>
              <p>6.2 本站特有的标识、版面设计、编排方式等版权均属上海激想体育文化有限公司享有，未经本站许可，不得任意复制或转载。 </p>
              <p>6.3 使用本站的任何内容均应注明“来源于激想云商”及署上作者姓名，按法律规定需要支付稿酬的，应当通知本站及作者及支付稿酬，并独立承担一切法律责任。</p>
              <p>6.4 本站享有所有作品用于其它用途的优先权，包括但不限于网站、电子杂志、平面出版等，但在使用前会通知作者，并按同行业的标准支付稿酬。</p>
              <p>6.5 本站所有内容仅代表作者自己的立场和观点，与本站无关，由作者本人承担一切法律责任。 </p>
              <p>6.6 恶意转载本站内容的，本站保留将其诉诸法律的权利。</p>
              <h3>七、其他</h3>
              <p>7.1　本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。</p>
              <p>7.2　激想云商未行使或执行本服务协议任何权利或规定，不构成对前述权利或权利之放弃。</p>
              <p>7.3　如本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，本协议的其余条款仍应有效</p>
              <p>7.4本协议解释权及修订权归上海激想体育文化有限公司所有。</p>

            </div>
          </div>
        </div>
      </mt-popup>
    </mt-popup>
    <!-- 注册 -->
  </div>
</template>
<script>
  import {
    Field,
    Button,
    Toast,
    Popup
  } from 'mint-ui';

  import {
    encryptString
  } from '@/utils/mixin';

  export default {
    data() {
      return {
        visiblePopup: {
          registered: false,
          registeredCode: false,
          registeredFormId: false,
          registeredAgrement: false
        },
        loginForm: {
          username: '',
          password: '',

        },
        registeredForm: {
          phone: '',
          username: '',
          password: '',
          confirmpassword: '',
          resetSendPhoneMessage: null,
          code: ''
        }
      }
    },
    components: {},
    methods: {
      async doLogin() {
        //登录
        let userPwd = encryptString(this.loginForm.password, 0);
        await this.$store.dispatch('DoLogin', {
          userAccount: this.loginForm.username,
          userPwd: userPwd
        }).then(response => {
          let redirectUrl = decodeURIComponent(this.$route.query.redirect || '/');
          //跳转到指定的路由
          this.$router.push({
            path: redirectUrl
          });
        }, error => {
          Toast({
            message: error.info,
            position: 'bottom'
          })
        })
      },
      async registered() { //注册账号
        let userPwd = encryptString(this.registeredForm.confirmpassword, 0);
        let formData = {
          tel: this.registeredForm.phone,
          userPwd: userPwd
        }
        this.$store.dispatch('Registered', formData)
          .then(response => {
            Toast({
              message: '注册成功',
              position: 'bottom'
            })
            this.visiblePopup.registered = false;
            this.visiblePopup.registeredCode = false;
            this.visiblePopup.registeredFormId = false;
          }, err => {
            return Toast({
              message: err.info,
              position: 'bottom'
            })
          })
      },
      async registeredNext() {
        //验证用户账号是否可用
        this.$store.dispatch('ValidateAccount', {
          account: this.registeredForm.phone
        }).then(response => {
          this.visiblePopup.registeredCode = true
        }, err => {
          Toast({
            message: err.info,
            position: 'bottom'
          })
        })
      },
      async registeredSendPhoneMessage() { //获取验证码
        await this.$store.dispatch('SendPhoneCode', {
          tel: this.registeredForm.phone,
          fal: true //注册要验证手机是否存在系统中
        });
        this.registeredForm.resetSendPhoneMessage = 60;
        let times = setInterval(() => {
          if (this.registeredForm.resetSendPhoneMessage <= 0) {
            this.registeredForm.resetSendPhoneMessage = null;
            clearInterval(times);
          } else {
            this.registeredForm.resetSendPhoneMessage--;
          }
        }, 1000)
      },
      async sendPhoneMessagedNext() {
        //验证验证码
        let params = {
          tel: this.registeredForm.phone,
          code: this.registeredForm.code,
          fal: true, //手机号不在系统中
          time: 1 // 1：15分钟后过期
        }
        this.$store.dispatch('ValidateCode', params)
          .then(response => {
            this.visiblePopup.registeredFormId = true
          }, err => {
            Toast({
              message: err.info,
              position: 'bottom'
            })
          })
        this.visiblePopup.registeredFormId = true
      },

    },
    mounted: function () {

    }
  }
</script>